<template>
    <div>
      <h3>这是第六个demo</h3>
      <p>我叫{{person.name}},今年{{person.age}}</p>
      <button @click="changeName">修改姓名</button>
      <button @click="changeAge">修改年龄</button>
    </div>
  </template>
  
  <script setup lang="ts" name="Demo6">
  import { ref, reactive,toRefs,toRef } from "vue";
  let person = reactive({
    name: "孙悟空",
    age: 500,
  });
  // 解构
  /**
   * 使用toRefs从person这个响应式对象里 解构出name，age 并且解构出的东西仍旧是响应式的
   */
  let name1 = toRef(person,'name')
  let age1 = toRef(person,'age')
  // let {name,age} = toRefs(person);
  // let [a,b,c] = [1,24,654]
  console.log(name1,'哈哈')
  // console.log(name,age,'哈哈')
  function changeName() {
      name1.value = '哪吒'
  }
  function changeAge() {
      age1.value = 123
  }
  </script>
  <style lang="scss" scoped></style>